<!--
 * @Author: wjk
 * @Date: 2019-12-31 15:40:51
 * @LastEditors: wjk
 * @LastEditTime: 2020-11-05 10:09:01
 * @description: 精英销售榜
 -->
<template>
  <base-page-view class-name="page-container sale-top-ranking-container grey-container">
    <view class="top-rank">
      <view class="return-button" @click="_back">
        <image :src="`/static/images/icon/icon_return.png`" />
      </view>
      <view class="filter-box">
        <view class="filter-bg" :style="{'background-image': `url(${userData.image_photo_url|| 'https://asset.bisinuolan.cn/bixuan_uni/images/mine/touxiang.png'})`}"></view>
      </view>
    </view>
    <view class="top-user">
      <image class="user-head" :src="userData.image_photo_url || '/static/images/mine/touxiang.png'" mode="aspectFill" @error="onImageLoad(userData)" />
      <view class="title">{{ userData.user_name }}</view>
      <view v-if="userData.sloganList" class="subTitle">
        <view v-for="(item, index) in userData.sloganList" :key="index">
          {{ item }}
        </view>
      </view>
      <view v-else class="subTitle">{{ userData.slogan || '主人太懒了，还没来得及写心得口号~' }}</view>
    </view>
    <block v-if="userData.raking_list && userData.raking_list.length">
      <view class="rank-list-box rank-detail-box">
        <view class="rank-title">
          <view class="title">用户名</view>
          <view class="title">排行</view>
          <view class="title">上月销售(元)</view>
        </view>
        <view class="rank-item-list">
          <view v-for="(item, index) in userData.raking_list" :key="index" class="rank-item" @click="toDetail(item)">
            <view class="user">
              <view class="head-box">
                <image mode="aspectFill" is-head class="user-head" width="88" height="88" :src="item.image_photo_url || '~@/static/images/mine/touxiang.png'" @error="onImageLoad(item)" />
                <image v-if="item.is_self" class="self" :src="`/static/images/mine/icon_no_self.png`" />
              </view>
              <view class="user-name">{{ item.user_name }}</view>
            </view>
            <image v-if="item.ranking < 4 && item.ranking > 0" :src="`/static/images/mine/icon_no_${item.ranking}.png`" class="no_image" />
            <view v-else class="id">{{ item.ranking || '未上榜' }}</view>
            <view v-if="(item.ranking < 4 && item.ranking > 0) || item.is_self" class="money">{{ item.sales_volume | formatMoney }}</view>
            <view v-else class="money-none">{{ item.show_volume }}</view>
          </view>
        </view>
        <view class="block-line-2">
          <view class="skill" @click="toUrl">
            1分钟教你如何上榜
            <image class="arrow" :src="`/static/images/mine/icon_more_arrow.png`" />
          </view>
        </view>
      </view>
    </block>
    <view class="teaching-title">
      <view class="title-text">技巧心得</view>
    </view>
    <view v-if="userData.experience" class="user-teaching">
      <rich-text :nodes="nodes"></rich-text>
    </view>
    <view v-else class="user-teaching">
      主人太懒了，还没来得及分享技巧心得~
    </view>
    <view class="to-ranking-list" @click="toRankList">查看排行榜单 ></view>
  </base-page-view>
</template>

<script>
import { parseHtmlSync } from '@/components/jyf-Parser/libs/MpHtmlParser'
import { pageNavigateBack, h5NavigateTo } from '@/utils/navigateTo.js'
import { mapGetters } from 'vuex'
import './index.scss'
export default {
  components: {
  },
  data() {
    return {
      head_img: '',
      userData: {},
      nodes: []
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  created() {
  },
  onLoad(option) {
    if (!option.id) {
      return
    }
    this.fetchData(option.id)
  },
  onShow() {

  },
  methods: {
    onImageLoad(item) {
      this.$set(item, 'image_photo_url', 'https://asset.bisinuolan.cn/bixuan_uni/images/mine/touxiang.png')
    },
    _back() {
      pageNavigateBack()
    },
    toUrl() {
      h5NavigateTo(this.userData.jump_url)
    },
    toRankList() {
      console.log('pre', this.$prePage(2, 'route'))
      const preRoute = this.$prePage(2, 'route')
      if (preRoute && preRoute.includes('/sale-top-ranking/index')) {
        this._back()
        return
      }
      this.$navigateTo(`/pagesActivity/sale-top-ranking/index`)
    },
    async fetchData(id) {
      const res = await this.$api.homeApi.saleTopRankingDetail({
        visitUserId: id,
        userId: this.user ? this.user.uid : ''
      })
      if (res.code) {
        return
      }
      this.nodes = parseHtmlSync(res.data.experience) || []
      this.userData = res.data
      if (this.userData.slogan) {
        this.userData.sloganList = this.userData.slogan.split('\n')
      }
    }
  }
}
</script>
